<template>
    <scroll-view :scroll-x="true" scroll-with-animation :scroll-into-view="intoIndex" :show-scrollbar="false">
        <view class="tabs">
            <view
                v-for="(tab, index) in tabs"
                class="tab-item"
                :class="tabIndex == index && 'active'"
                @click="clickTab(tab, index)"
                :key="index"
                :id="'text' + index">
                <text class="tab-item-text">{{ tab.timeTxt }}</text>
                <text class="tab-item-state" v-if="tab.isstart">抢购中</text>
                <text class="tab-item-state" v-if="!tab.isstart && !tab.isEnd">即将开抢</text>
            </view>
        </view>
    </scroll-view>
</template>

<script>
export default {
    props: ["tabIndex", "tabs"],
    data() {
        return {
            intoIndex: "",
        }
    },
    watch: {
        tabIndex(newdata, olddata) {
            if (newdata > olddata) {
                if (this.tabIndex > 3) {
                    this.intoIndex = "text" + this.tabIndex
                }
            } else {
                if (this.tabIndex < this.tabs.length - 3) {
                    this.intoIndex = "text" + this.tabIndex
                }
            }
            this.$forceUpdate()
        },
    },
    mounted() {},
    methods: {
        clickTab(item, index) {
            this.$emit("clickTab", index)
        },
    },
}
</script>

<style lang="scss">
.tabs {
    display: flex;
    justify-content: flex-start;
    background: $color-white;
    border-bottom: 1rpx solid #ebebeb;
    .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        color: $color-gray-3;
        height: 100rpx;
        width: 25%;
        flex: 0 0 auto;
        background: #fff;
        .tab-item-text {
            font-size: 30rpx;
            font-weight: 700;
            padding-bottom: 10rpx;
            color: $color-gray-3;
        }
        .tab-item-state {
            font-size: 24rpx;
            font-weight: normal;
            color: $color-gray-3;
        }
        &.active {
            background: $app-color-main;
            .tab-item-text {
                color: #fff;
            }
            .tab-item-state {
                color: #fff;
                font-size: 24rpx;
                font-weight: normal;
            }
        }
    }
}
</style>
